<template>
	<view class="home_content">
		<!-- 搜索栏 -->
		<navigator url="/pages/seek/seek" class="home_seek">
			<uni-search-bar @confirm="search" @input="input" :radius="200" bgColor="#f5f5f5" placeholder="大家都在搜索的美好" cancelButton="none">
				<uni-icons slot="searchIcon" color="#999999" size="25" type="search" class="home_seIco" />
			</uni-search-bar>
		</navigator>
		<!-- 导航栏 -->
		<scroll-view class="home_navBlock" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
			<view class="home_navUl">
				<text :class="{'home_navLi':true,'active':n==active}" v-for="(item,n) in classList" :key="item.id" @click="cutClass(n)">{{item.title}}</text>				
			</view>
		</scroll-view>
		<!-- 数据列表 -->
		<view class="home_InnContent">	 
			<swiper class="swiper_1" :duration="300" easing-function="linear" :current="active" @change="changeActive"> 
				<swiper-item class="swiper-item" v-for="item in classList" :key="item.id">
					<data-list :listData="listData[active].list" @loadNextData="loadNextData"></data-list>				
				</swiper-item>				
			</swiper>			
		</view>
	</view>	
</template>

<script>
	import dataList from "../../components/dataList.vue"
	export default {
		data() {
			return {
				active:0,//分类选中
				classList:[],//分类数据	
				listData:[],//列表数据	
				scrollLeft:0, //分类横向滚动参数		
				dataNum:6 ,//每页显示数据条数,	
				pageNumList:[] //页数列表
			}
		},
		components:{
			dataList
		},
		onLoad:async function(){
			await this.getClass(); //获取分类
			this.getThisList(); //获取当前列表数据
		},
		methods: { 
			cutClass(n){
				this.active = n;				
			},
			async getClass(){		
				const {data:res} = await this.$http({
					url: 'd_class'
				})		
				//存储分类
				this.classList = res.data;
				//初始化列表数据结构
				this.classList.forEach(()=>{
					this.listData.push({list:[],sum:0});
				})	
			},
			//获取当前列表数据
			async getThisList(){
				let pagenum = this.pageNumList[this.active] || 0; //默认加载0索引页数据	
				const {data:res} = await this.$http({
					url: `d_list?classfilter=${this.classList[this.active].title}&&pagenum=${pagenum}&&pagesize=${this.dataNum}`
				})		
				//响应式更新列表数据	
				this.listData[this.active].list.push(...res.data.list)
				this.listData[this.active].sum = res.data.sum;
				//this.$set(this.listData,this.active,data) //响应式数据更新
				this.pageNumList[this.active] = pagenum //记录页数列表	
			},
			//分类选中变动
			changeActive(e){
				this.active = e.detail.current
				this.scrollLeft = 64 * this.active;
				if(this.listData[this.active].list < 1){
					this.getThisList(); //获取当前列表数据
				}
			},
			//加载下一页数据
			loadNextData(){
				//判断当前页数小于最大页数,			
				if(this.pageNumList[this.active]+1 < this.listData[this.active].sum/this.dataNum){
					this.pageNumList[this.active] += 1;
					this.getThisList()
				}				
			}
		},
		onReachBottom() {
			console.log("面页触底了")
		}
	}
</script>

<style lang="scss">	
	@import '@/static/common.scss';
	.home_seek {position: relative;width:90%;margin:auto;}	
	.home_seIco {position: relative;top:5rpx;}
	.home_navUl {padding:30rpx 0;}
	.home_navLi {padding:20rpx 36rpx;}
	.home_navLi.active {color:#000;font-weight: bold;}
	.home_InnContent {position: relative;width:100%;background:#f5f5f5;}
	.home_navBlock {white-space: nowrap;}	
	.swiper_1 {height:calc(100vh - 404rpx);}
	//#ifdef MP-WEIXIN
		.swiper_1 {height:calc(100vh - 200rpx);}
	//#endif
	.swiper-item {
	  position: relative;
	  width:100%;
	  height:100%;
	}
</style>
